<template>
  <div class="form-group">
    <label :style="finalLabelStype" :class="labelClass"><span v-if="required" class="required ">*</span>{{ title }}：</label>
    <div :class="rightClass" :style="rightStyle">
      <form-pop :content="error"/>
      <a-radio-group :value="value" @change="onChange" :size="size">
        <a-radio 
          v-for="(item, index) in dataList"
          :key="keyPre + item.key + index"
          :value="item.key"
        >
          {{ item.title }}
        </a-radio>
      </a-radio-group>
      <slot name="actions" class="action"></slot>
    </div>
  </div>
</template>
<script>
import formAttr from "@/mixins/form/form-attr";

const defaultLabelStype =
  "font-weight: normal;justify-content: flex-end;padding-left: 5px;text-align: right;width:110px;";

export default {
  name: "FormRadio",
  mixins: [formAttr],
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    mode: {
      type: String,
      default: "default"
    },
    size:{
      type: String,
      default: "default"
    },
    keyPre: {
      type: String,
      default: "fr"
    }
  },
  data() {
    return {
      radioStyle: {
        // display: 'block-inline',
        // height: '30px',
        // lineHeight: '30px',
      }
    };
  },
  computed: {
    finalLabelStype: function() {
      return this.labelStyle || defaultLabelStype;
    }
  },
  methods: {
    onChange(e) {
      this.$emit("input", e.target.value);
    }
  }
};
</script>

<style lang="less" scoped>
  .action{
    border-left:1px solid #eee ;
  }
</style>
